<template>
	<view class="product-list waterfall-item-container">
		<view class="product-item waterfall-item" @tap="onTap">
			<image v-if="params['mark']" class="mark-at-top" :src="params['mark']['icon']"  mode="widthFix" :style="params.mark.position==0?'top:'+params.mark.t_margin+'px; left:'+params.mark.l_margin+'px;':'top:'+params.mark.t_margin+'px; right:'+params.mark.l_margin+'px;'"></image>
			<image class="" :src="params.product_image" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
			<view class="content">
				<view v-if="params.discount_product_data.gift_product_data" style="position: relative;">
							<!-- <image class="product-item-image" @click="onTap" :src="params.product_image"></image> -->
							<view v-if="params.discount_product_data.gift_product_data.file_path" class="pentagonBox" @click.stop="emitactivityPF(params.discount_product_data)">
								<view class="pentagon"><view class="pentagonTxt">买赠活动</view></view>
								<image class="pentagonImage" :src="params.discount_product_data.gift_product_data.file_path"></image>
								<u-icon name="arrow-right" size="26" color="#9ea09a"></u-icon>
							</view>
						</view>
				<view class="product-con">
					<view class="product-con-name">
                        <view
                            v-if="
                                params.discount_product_data.activity_type == 1
                            "
                            class="seckill-activity"
                        >
                            {{
                                quantityDiscount(
                                    params.discount_product_data.rebate_json
                                )
                            }}
                        </view>
                        <view
                            v-if="
                                params.discount_product_data.activity_type == 2
                            "
                            class="seckill-activity"
                            >首件{{
                                params.discount_product_data.first_price
                            }}元
                            {{
                                params.discount_product_data.start_buy_num
                            }}件起购</view
                        >
                        <view
                            v-if="
                                params.discount_product_data.activity_type == 3
                            "
                            class="seckill-activity"
                        >
                            <view class="seckill-activity-ele"> 赠 </view>
                            买{{ params.discount_product_data.buy_num }}赠{{
                                params.discount_product_data.gift_num
                            }}
                        </view>
                        <view>
							<span
								class="product-label"
								v-if="params['label']"
							>
								{{ params['label']['label_name'] }}
							</span>
							{{ params.product_name }}
						</view>
                    </view>
					<view class="flex-space-between">
						<view class="product-con-price">
							<view><text>￥</text>{{params.product_sku.product_price}}</view>
							<text>￥{{params.product_sku.line_price}}</text>
						</view>
						<view class="buy">购买</view>
			
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"helangWaterfallItem",
		options:{
			virtualHost: true
		},
		props:{
			params:{
				type: Object,
				default(){
					return {}
				}
			},
			tag:{
				type:String | Number,
				default:''
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			quantityDiscount(rebate_json){
				if(Array.isArray(rebate_json) && rebate_json.length>0){
					let formattedString = rebate_json.map(item => {  
						let discounts = (parseFloat(item.rebate) / 10).toFixed(1);
						let DisNumber = discounts.substring(0, discounts.indexOf('.'));
						let point = discounts.substring(discounts.indexOf('.') + 1,discounts.indexOf('.') + 2);
						let discount = DisNumber+(point>0?'.'+point:'');
						return `${item.num}件${discount}折`;  
					}).join(' '); 
				return formattedString
				}
			},
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item-container').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height",height,this.$props.tag);
				}).exec();
				// console.log('emitheight',e)
			},
			emitactivityPF(item){
				this.$emit("activityPF",item);
			},
			onTap(){
				this.$emit("click",this.$props.index,this.$props.tag);
			}
		}
	}
</script>

<style lang="scss" scoped>
.product-list {
	// padding-bottom: 30rpx;
	// margin-top: 28rpx;
	.buy{
		width: 82rpx;
		border-radius: 20rpx;
		color: #ffffff;
		height: 40rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #BB0024;
	}
	.product-item {
		width: 334rpx;
		border-radius: 16rpx;
		// margin-bottom: 24rpx;
		position: relative;
	}

	.product-label {
		background: #BB0024;
		padding: 0rpx 10rpx 2rpx 10rpx;
		color: #fff;
		font-size: 12px;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.product-item-image {
		width: 334rpx;
		height: 328rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.mark-at-top {
		position: absolute;
		z-index: 80;
		width: 120rpx;
		// height: 100rpx;
	}

	.product-con {
		padding: 12rpx 0 18rpx;

		.product-con-name {
			font-size: 26rpx;
			color: #111111;
			font-weight: bold;
			// margin-bottom: 14rpx;
			min-height: 68rpx;
		}

		.product-con-price {

			view {
				font-size: 32rpx;
				font-weight: bold;
				color: $uni-color-theme;

				text {
					color: $uni-color-theme;
					font-size: 24rpx;
					text-decoration: none;
				}
			}

			text {
				font-size: 22rpx;
				text-decoration: line-through;
				color: #CCCCCC;
			}
		}
	}
}
.waterfall-item{
	padding: 16rpx;
	background-color: #fff;
	border-radius: 4px;
	font-size: 28rpx;
	color: #666;
	
	image{
		display: block;
		width: 100%;
		// 默认设置一个图片的大约值
		height: 350rpx;
	}
	
	.content{
		margin-top: 16rpx;
		
		.money{
			color: #fa3534;
			margin-top: 8rpx;
		}
		
		.label{
			background-color: #fa3534;
			color: #fff;
			font-size: 20rpx;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
		}
		
		.shop-name{
			font-size: 20rpx;
			color: #999;
		}
	}
	
}
.seckill-activity {
		font-size: 24rpx;
		padding: 0 4rpx;
		margin: 10rpx 0;
		color: #bb0024;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		border: 1px solid #bb0024;
		display: inline-block;
	.seckill-activity-txt {
		border: 1px solid #bb0024;
		border-radius: 50%;
		font-size: 18rpx;
		width: 26rpx;
		height: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 6rpx;
		display: inline-block;
		text-align: center;
		transform: scale(0.8);
	}
	.seckill-activity-ele {
		display: inline-block;
		padding: 0 4rpx;
		background-image: linear-gradient(to right, #bb0024, #fa0032);
		color: #fff;
		margin:0 10rpx 0 -4rpx;
		border-radius: 8rpx 0 8rpx 8rpx;
	}
}
.pentagonBox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.pentagonImage {
		width: 80rpx;
		height: 80rpx;
		margin-left: -100rpx;
	}
	.pentagon {
		width: 80rpx;
		height: 80rpx;
		background-color: #fde9eb;
		clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0% 100%, 0% 38%);
		transform: rotate(90deg);
		display: flex;
		justify-content: center;
		align-items: center;
		.pentagonTxt {
			width: 40rpx;
			transform: rotate(-90deg);
			font-size: 16rpx;
			color: #bb0024;

		}
	}
}
</style>
